{% extends "base.html" %}
{% block title %}公文起草{% endblock %}
{% block content %}
<div class="row justify-content-center align-items-center g-1">
  <div class="col-8 pt-5">
    <div class="card">
      <div class="card-header" style="background-color: #f0f0f0; color: #333; font-weight: bold; padding: 10px;">
        公文起草
      </div>
      <div class="card-body">
        <form method="post" action="{{ url_for('document_add_commit') }}">
          {{ form.csrf_token }}
          <div class="row mb-3">
            <label for="title" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">标题</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="title" name="title" required style="border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3">
            <label for="content" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">内容</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="content" name="content" rows="6" required style="border: 1px solid #ccc; border-radius: 4px;"></textarea>
            </div>
          </div>
          <div class="row mb-3">
            <label for="author_name" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">作者</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="author_name" name="author_name" value="{{ form.author_name.data }}" readonly required style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3">
            <label for="drafting_unit" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">发文单位</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="drafting_unit" name="drafting_unit" value="{{ form.drafting_unit.data }}" readonly required style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3">
            <label for="receiving_unit" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">收文单位</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="receiving_unit" name="receiving_unit" required style="border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3">
            <label for="status" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">状态</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="status" name="status" value="{{ form.status.data }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3">
            <label for="security_level" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">密级</label>
            <div class="col-sm-10">
              <select class="form-select w-100" id="security_level" name="security_level" style="max-width: 300px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="无" selected>无</option>
                <option value="秘密">秘密</option>
                <option value="机密">机密</option>
                <option value="绝密">绝密</option>
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="modified_date" class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">修改时间</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="modified_date" name="modified_date" value="{{ form.modified_date.data }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
            </div>
          </div>
          <div class="row mb-3 justify-content-center align-items-center">
            <div class="d-flex justify-content-between" style="width: 100%;">
              <!-- 取消按钮 -->
              <a href="/document" class="btn btn-secondary align-buttons" style="width: 24%; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
                取消操作
              </a>
              <!-- 保存为草稿按钮 -->
              <button type="submit" name="action" value="save_draft" class="btn btn-secondary" style="width: 24%; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
                保存草稿
              </button>
              <!-- 提交审核按钮 -->
              <button type="submit" name="action" value="submit_review" class="btn btn-primary" style="width: 24%; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
                提交审核
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const saveButton = document.querySelector('button[type="submit"]');
    saveButton.addEventListener('click', function (event) {
      const title = document.getElementById('title').value;
      if (title.length > 255) {
        alert('标题长度不能超过255个字符，请修改后再提交。');
        event.preventDefault();  // 阻止表单提交
      }
    });
  });
</script>
{% endblock %}